<template>
  <Drawer
    v-model="drawerShow"
    :width="width"
    :title="title"
    :mask-closable="true"
    :styles="styles"
    @on-close="closeBt"
  >
    <div class="calc">
      <slot></slot>
    </div>
    <div class="drawer-footer" v-if="showButton">
      <Button @click="closeBt" class="mr20">{{ cancelBtn }}</Button>
      <Button type="primary" @click="submitBt" :loading="loading" v-if="showSubmit">{{
          submitBtn
        }}
      </Button>
    </div>
  </Drawer>
</template>

<script>
export default {
  components: {},
  props: {
    value: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: [Number, String],
      default: 700
    },
    showButton: {
      type: Boolean,
      default: true
    },
    // 是否展示保存按钮
    showSubmit: {
      type: Boolean,
      default: true
    },
    cancelBtn: {
      type: String,
      default: '取消'
    },
    submitBtn: {
      type: String,
      default: '保存'
    },
  },
  data() {
    return {
      repeatClick: false,
      timeRepeat: '',
      styles: {
        // 右侧弹出信息框
        overflow: 'auto !important',
        position: 'static'
      }
      // drawerShow: false
    }
  },
  computed: {
    drawerShow: {
      get() {
        return this.value
      },
      set() {
        return this.value
      }
    }
  },
  created() {
  },

  mounted() {
  },
  methods: {
    submitBt() {
      this.$emit('drawerSubmit')
    },
    closeBt() {
      this.$emit('input', false)
    },
  }
}
</script>
<style lang="less" scoped>
.calc {
  height: 100% !important;
}

/deep/ .ivu-drawer-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eeeeee;

  .ivu-drawer-header p, .ivu-drawer-header-inner {
    height: 22px;
    font-size: 16px;
    //font-weight: 500;
    color: #333333;
    line-height: 22px;
  }
}

/deep/ .ivu-drawer-close {
  top: 13px;

  .ivu-icon-ios-close {
    top: 0;
  }
}

/deep/ .ivu-drawer-body {
  padding: 20px;
}

/deep/ .drawer-footer {
  border-top: 1px solid #eeeeee;
}

/deep/ .ivu-radio-group {
  line-height: 1;
}
</style>
